<template>
  <div class="u-login-about-container login-container">
      <div class="login-top-text">
        <p>您好，</p>
        <p>欢迎来到友牧农场</p>
      </div>
      <div class="login-center">
        <van-button round class="u-btn-default u-bg-gradient-light wx-login-btn" @click="loginByWx"><img src="../../assets/img/login_wx_icon.png" class="login-icon" alt="">微信登录</van-button>
        <van-button round class="u-btn-default phone-login-btn" @click="loginByPhone"><img src="../../assets/img/login_phone_icon.png" class="login-icon" alt="">手机登录</van-button>
      </div>
      <div class="login-agreement">
        直接登录代表您同意<span class="color-primary" @click="jumpView('userAgreement')">《友牧农场用户协议》</span>和<span class="color-primary" @click="jumpView('privacyAgreement')">《隐私保护协议》</span>
      </div>
  </div>
</template>

<script>
export default {
  methods: {
    jumpView(viewName) {
      this.$router.push({
        name: viewName
      })
    },
    loginByWx() {
      this.$api.get('/api/wx/toAuthorization')
        .then((res) => {
          window.location.href = res.data;
        })
    },
    loginByPhone() {
      this.$router.push({name: 'loginByAccount'});
    }
  }
}
</script>

<style lang="scss" scoped>
  .login-container {
    background: url(https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20190929/15697233548966256.png) no-repeat center;
    background-size: cover;
    .login-top-text {
      font-size: 24px;
      font-weight: 500;
      color: #344047;
      p:first-child {
        padding-top: 50px;
        margin-bottom: 10px;
      }
    }
    .login-center {
      width: 100%;
      height: 50px;
      margin-top: 182px;
      .wx-login-btn {
        color: #fff;
      }
      .phone-login-btn {
        margin-top: 24px;
        background-color: #fff;
        color: #31BC8D;
        img {
          position: relative;
          left: 4px;
        }
      }
      .login-icon {
        position: relative;
        top: -3px;
        width: 30px;
        height: 30px;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .login-agreement {
      position: absolute;
      bottom: 54px;
      left: 0;
      width: 100%;
      font-size: 12px;
      text-align: center;
      color: #999;
    }
  }
</style>